<template>
  <div class="edit">
    <van-nav-bar fixed @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#222" size="22"/>
      </template>
      <template #title>
        <div class="title m_fs18 m_fw">编辑资料</div>
      </template>
    </van-nav-bar>

    <div class="avatar_box m_tac">
      <van-uploader accept="image/*" :after-read="afterRead">
        <van-image v-if="userinfo.avatarUrl" round class="avatar" :src="ip+userinfo.avatarUrl"/>
        <div v-else class="m_br50p m_tac m_fs30 m_fw avatar avatar2">{{userinfo.username?userinfo.username.slice(0,1):'?'}}</div>
        <div class="m_tac m_fs14 tip">点击更换头像</div>
      </van-uploader>
    </div>

    <div class="menu">
      <menu-item :tit="'昵称'" :val="userinfo.nickname?userinfo.nickname:''" 
        @click="onClickMenu"></menu-item>
      <menu-item :tit="'用户名'" :val="userinfo.username" @click="onClickMenu" :arrow="false"></menu-item>
      <menu-item :tit="'性别'" :val="userinfo.gender<1? '男': userinfo.gender>1?'不显示':'女'" 
        @click="onClickMenu"></menu-item>
      <menu-item :tit="'生日'" :val="userinfo.birthday?userinfo.birthday.substr(0,10):''" 
        @click="onClickMenu"></menu-item>
      <menu-item :tit="'所在地'" :val="userinfo.address?userinfo.address:''" @click="onClickMenu"></menu-item>
      <menu-item :tit="'学校'" :val="userinfo.school" @click="onClickMenu"></menu-item>
      <menu-item :tit="'个人介绍'" :val="userinfo.signature" @click="onClickMenu"></menu-item>
    </div>

    <van-dialog  v-model="showDialog"  show-cancel-button :title="dialogTitle"
    confirmButtonColor="#008080" @confirm="onConfirm">
      <div class="dialog_in">
        <!-- 昵称 -->
        <van-field autofocus v-if="itemName=='昵称'" v-model="nickname" label="更改为" 
          label-width="60" border placeholder="请输入用户名" />
        <!-- 性别 -->
        <van-radio-group class="gender_box m_flex m_fjcsb" v-if="itemName=='性别'" direction="horizontal"
        v-model="gender" checked-color="#008080">
          <van-radio :name="0">男</van-radio>
          <van-radio :name="1">女</van-radio>
          <van-radio :name="2">不显示</van-radio>
        </van-radio-group>
        <!-- 生日 -->
        <van-datetime-picker v-if="itemName=='生日'" :show-toolbar="false"
          v-model="birthday" type="date" :min-date="minDate" :max-date="maxDate"/>
        <!-- 所在地 -->
        <van-field v-if="itemName=='所在地'" v-model="address" rows="1" autosize label="更改为" type="textarea"
          placeholder="请输入所在地" border autofocus label-width="60"/>
        <!-- 学校 -->
        <van-field v-if="itemName=='学校'" v-model="school" rows="1" autosize label="更改为" type="textarea" 
          placeholder="请输入学校" border autofocus label-width="60"/>
        <!-- 个人介绍 -->
        <van-field v-if="itemName=='个人介绍'" v-model="signature" rows="1" autosize label="更改为" type="textarea"
          placeholder="请输入个人介绍" border autofocus label-width="60"/>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import MenuItem from '@/components/MenuItem.vue'
import { ref } from 'vue';
export default {
  setup() {
    const showDialog = ref(false);
    const dialogTitle = ref('');
    const itemName = ref('');
    return { showDialog, dialogTitle, itemName };
  },
  components:{
    MenuItem
  },
  data(){
    return{
      showDialog: false,
      dialogTitle: '',
      itemName:'无',
      nickname: '',
      gender: 2,
      birthday: null,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      address: '',
      school: '',
      signature: ''
    }
  },
  computed: {
    ...mapState(['ip']),
    ...mapState('m_user',['userinfo']),
  },
  methods:{
    ...mapMutations('m_user',['setUserinfo']),
    // 返回
    onClickLeft(){
      this.$router.back()
    },
    // 读取头像图片后
    afterRead(file){
      this.userinfo.avatarUrl = file.content
      const formData = new FormData()
      formData.append('avatarFile',file.file)
      this.axios.post('/update/avatar',formData,{
        processData: false,
        contentType: false
      }).then(res=>{
        if(res.code===0){
          this.userinfo.avatarUrl = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
      return true
    },
    // 选择菜单项
    onClickMenu(item){
      if(item.tit=='昵称'){
        this.itemName = item.tit
        this.nickname = this.userinfo.nickname
        this.dialogTitle= this.nickname? '昵称：'+this.nickname:'昵称：无'
      }else if(item.tit=='性别'){
        this.itemName = item.tit
        this.gender = this.userinfo.gender
        this.dialogTitle= this.gender<1? '性别：男': this.gender>1?'性别：不显示':'性别：女'
      }else if(item.tit=='生日'){
        this.itemName = item.tit
        this.birthday = this.userinfo.birthday?new Date(this.userinfo.birthday): null
        this.dialogTitle= this.birthday? '生日：'+this.userinfo.birthday.substr(0,10): '生日：无'
      }else if(item.tit=='所在地'){
        this.itemName = item.tit
        this.address = this.userinfo.address
        this.dialogTitle= '所在地'
      }else if(item.tit=='学校'){
        this.itemName = item.tit
        this.school = this.userinfo.school
        this.dialogTitle= '学校'
      }else if(item.tit=='个人介绍'){
        this.itemName = item.tit
        this.signature = this.userinfo.signature
        this.dialogTitle= '个人介绍'
      }
      this.showDialog = true
    },
    // 确认修改
    onConfirm(){
      if(this.itemName=='昵称'){
        this.updateNickname()
      }else if(this.itemName=='性别'){
        this.updateGender()
      }else if(this.itemName=='生日'){
        this.updateBirthday()
      }else if(this.itemName=='所在地'){
        this.updateAddress()
      }else if(this.itemName=='学校'){
        this.updateSchool()
      }else if(this.itemName=='个人介绍'){
        this.updateSignature()
      }
    },
    // 修改用户昵称
    updateNickname(){
      if(this.nickname.trim()==='') return this.$toast('不能为空')
      if(this.nickname.trim()===this.userinfo.nickname) return this.$toast('没有改变')
      this.axios.post('/update/nickname',{nickname: this.nickname}).then(res=>{
        if(res.code===0){
          this.userinfo.nickname = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 修改用户性别
    updateGender(){
      if(this.gender===this.userinfo.gender) return this.$toast('没有改变')
      this.axios.post('/update/gender',{gender: this.gender}).then(res=>{
        if(res.code===0){
          this.userinfo.gender = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 修改用户生日
    updateBirthday(){
      this.formatDate(this.birthday)
      this.axios.post('/update/birthday',{birthday: this.formatDate(this.birthday)}).then(res=>{
        if(res.code===0){
          this.userinfo.birthday = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 修改用户所在地
    updateAddress(){
      if(this.address===this.userinfo.address) return this.$toast('没有改变')
      this.axios.post('/update/address',{address: this.address}).then(res=>{
        if(res.code===0){
          this.userinfo.address = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 修改用户学校
    updateSchool(){
      if(this.school===this.userinfo.school) return this.$toast('没有改变')
      this.axios.post('/update/school',{school: this.school}).then(res=>{
        if(res.code===0){
          this.userinfo.school = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 修改用户个人介绍
    updateSignature(){
      if(this.intro===this.userinfo.signature) return this.$toast('没有改变')
      this.axios.post('/update/signature',{signature: this.signature}).then(res=>{
        if(res.code===0){
          this.userinfo.signature = res.dt
          this.setUserinfo(this.userinfo)
          this.$toast('修改成功')
        }else{
          this.$toast('修改失败')
        }
      })
    },
    // 格式化日期
    formatDate(date){
      var dt = new Date(date)
      var y = dt.getFullYear()
      var m = dt.getMonth()+1
      var d = dt.getDate()
      return `${y}-${m}-${d}`
    }
  },
}
</script>

<style lang="scss" scoped>
.edit{
  padding-top: 50px;
  .avatar_box{
    padding: 15px 0;
    .van-uploader{
      gap: 15px;
      .avatar{
        width: 100px;
        height: 100px;
        &.avatar2{
          line-height: 100px;
          color: #fff;
          background: #008080;
        }
      }
      .tip{
        padding-top: 15px;
        color: #9a9a9a;
      }
    }
  }
  .menu{
    padding: 0 20px;
  }
  .dialog_in{
    padding: 15px 15px;
  }
}
</style>